<template>
  <pro-panel class="lens" :groups="groups" :data="stageStore.layerData.data" />
</template>

<script setup lang="ts">
import ProPanel from '@/components/pro-panel/index.vue';
import { useStageStore } from '@/store/stage';

const stageStore = useStageStore();
const groups: any = computed(() => [
  {
    title: ' ',
    key: 'lens',
    collapsed: false,
    columns: [
      {
        label: '颜色',
        prop: 'color',
        type: 'color-picker',
        span: 12,
      },
      {
        label: '透明度',
        prop: 'opacity',
        type: 'input-number',
        span: 12,
        formProps: {
          controlsPosition: 'right',
          min: 0,
          max: 100,
        },
      },
      {
        label: '阴影',
        prop: 'shadowsType',
        type: 'switch',
        formProps: {
          inactiveValue: 0,
          activeValue: 1,
        },
        className: 'labelPositionLeft',
      },
      {
        label: '环境反射贴图',
        prop: 'isImage',
        type: 'switch',
        className: 'labelPositionLeft',
      },
      {
        label: '',
        prop: 'ImageURL',
        type: 'image-selector1',
        visible: stageStore.layerData.data.isImage,
      },
    ].filter((el) => el.visible !== false),
  },
]);
</script>

<style lang="less">
.el-color-dropdown__btns {
  .is-text {
    display: none;
  }
}
</style>

<style scoped lang="less">
.lens {
  padding: 0 8px;
  background: #3d3d3d;
  border-radius: 4px;

  :deep(.panel-group-header) {
    display: none;
  }

  :deep(.panel-group) {
    padding: 8px;
  }
}
</style>
